<template>
    <div>
        <div class="container">
            <div class="login-form">
                <h1 class="h1">网上图书商城注册</h1>
                <el-form ref="rgsForm" class="rgs-form" :model="rgsForm" label-width="70px">

                    <el-form-item label="用户名" class="input" v-if="tableName=='yonghu'">
                        <el-input v-model="ruleForm.yonghuming" autocomplete="off" placeholder="用户名"/>
                    </el-form-item>

                    <el-form-item label="密码" class="input" v-if="tableName=='yonghu'">
                        <el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password"
                                  #elsetype="text"/>
                    </el-form-item>
                    <el-form-item label="确认密码" class="input" v-if="tableName=='yonghu'">
                        <el-input v-model="ruleForm.mima2" autocomplete="off" placeholder="确认密码" type="password"/>
                    </el-form-item>
                    
                    <el-form-item label="姓名" class="input" v-if="tableName=='yonghu'">
                        <el-input v-model="ruleForm.xingming" autocomplete="off" placeholder="姓名"/>
                    </el-form-item>

                    <el-form-item label="邮箱" class="input" v-if="tableName=='yonghu'">
                        <el-input v-model="ruleForm.youxiang" autocomplete="off" placeholder="邮箱"/>
                    </el-form-item>

                    <el-form-item label="手机" class="input" v-if="tableName=='yonghu'">
                        <el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手机"/>
                    </el-form-item>

                    <el-form-item label="账号" class="input" v-if="tableName=='maijia'">
                        <el-input v-model="ruleForm.zhanghao" autocomplete="off" placeholder="账号"/>
                    </el-form-item>

                    <el-form-item label="密码" class="input" v-if="tableName=='maijia'">
                        <el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password"
                                  #elsetype="text"/>
                    </el-form-item>
                    <el-form-item label="确认密码" class="input" v-if="tableName=='maijia'">
                        <el-input v-model="ruleForm.mima2" autocomplete="off" placeholder="确认密码" type="password"/>
                    </el-form-item>
                    
                    <el-form-item label="卖家姓名" class="input" v-if="tableName=='maijia'">
                        <el-input v-model="ruleForm.maijiaxingming" autocomplete="off" placeholder="卖家姓名"/>
                    </el-form-item>
                    <el-form-item label="身份证" class="input" v-if="tableName=='maijia'">
                        <el-input v-model="ruleForm.shenfenzheng" autocomplete="off" placeholder="身份证"/>
                    </el-form-item>

                    <el-form-item label="手机" class="input" v-if="tableName=='maijia'">
                        <el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手机"/>
                    </el-form-item>
                    <el-form-item label="邮箱" class="input" v-if="tableName=='maijia'">
                        <el-input v-model="ruleForm.youxiang" autocomplete="off" placeholder="邮箱"/>
                    </el-form-item>
                    <div style="display: flex;flex-wrap: wrap;width: 100%;justify-content: center;">
                        <el-button class="btn" type="primary" @click="login()">注册</el-button>
                        <el-button class="btn close" type="primary" @click="close()">取消</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>


export default {
    data() {
        return {
            ruleForm: {},
            tableName: "",
            rules: {},
            rgsForm: {},
        };
    },
    mounted() {
        this.tableName = 'yonghu';
    },
    created() {
    
    },
    methods: {
        // 获取uuid
        getUUID() {
            return new Date().getTime();
        },
        close() {
            this.$router.push({path: "/login"});
        },
        // 注册
        login() {
            var url = this.tableName + "/register";
            if ((!this.ruleForm.yonghuming) && `yonghu` == this.tableName) {
                this.$message.error(`用户名不能为空`);
                return
            }
            if ((!this.ruleForm.mima) && `yonghu` == this.tableName) {
                this.$message.error(`密码不能为空`);
                return
            }
            if ((this.ruleForm.mima != this.ruleForm.mima2) && `yonghu` == this.tableName) {
                this.$message.error(`两次密码输入不一致`);
                return
            }
            if (`yonghu` == this.tableName && this.ruleForm.youxiang && (!this.$validate.isEmail(this.ruleForm.youxiang))) {
                this.$message.error(`邮箱应输入邮件格式`);
                return
            }
            if (`yonghu` == this.tableName && this.ruleForm.shouji && (!this.$validate.isMobile(this.ruleForm.shouji))) {
                this.$message.error(`手机应输入手机格式`);
                return
            }
            if (`yonghu` == this.tableName && this.ruleForm.money && (!this.$validate.isNumber(this.ruleForm.money))) {
                this.$message.error(`余额应输入数字`);
                return
            }
            if ((!this.ruleForm.zhanghao) && `maijia` == this.tableName) {
                this.$message.error(`账号不能为空`);
                return
            }
            if ((!this.ruleForm.mima) && `maijia` == this.tableName) {
                this.$message.error(`密码不能为空`);
                return
            }
            if ((this.ruleForm.mima != this.ruleForm.mima2) && `maijia` == this.tableName) {
                this.$message.error(`两次密码输入不一致`);
                return
            }
            if (`maijia` == this.tableName && this.ruleForm.shenfenzheng && (!this.$validate.checkIdCard(this.ruleForm.shenfenzheng))) {
                this.$message.error(`身份证应输入身份证格式`);
                return
            }
            if (`maijia` == this.tableName && this.ruleForm.shouji && (!this.$validate.isMobile(this.ruleForm.shouji))) {
                this.$message.error(`手机应输入手机格式`);
                return
            }
            if (`maijia` == this.tableName && this.ruleForm.youxiang && (!this.$validate.isEmail(this.ruleForm.youxiang))) {
                this.$message.error(`邮箱应输入邮件格式`);
                return
            }
            if (`maijia` == this.tableName && this.ruleForm.money && (!this.$validate.isNumber(this.ruleForm.money))) {
                this.$message.error(`余额应输入数字`);
                return
            }
            this.$http({
                url: url,
                method: "post",
                data: this.ruleForm
            }).then(({data}) => {
                if (data && data.code === 0) {
                    this.$message({
                        message: "注册成功",
                        type: "success",
                        duration: 1500,
                        onClose: () => {
                            this.$router.replace({path: "/login"});
                        }
                    });
                } else {
                    this.$message.error(data.msg);
                }
            });
        }
    }
};
</script>
<style scoped>
.el-radio__input.is-checked .el-radio__inner {
    border-color: #00c292;
    background: #00c292;
}

.el-radio__input.is-checked .el-radio__inner {
    border-color: #00c292;
    background: #00c292;
}

.el-radio__input.is-checked .el-radio__inner {
    border-color: #00c292;
    background: #00c292;
}

.el-radio__input.is-checked + .el-radio__label {
    color: #00c292;
}

.el-radio__input.is-checked + .el-radio__label {
    color: #00c292;
}

.el-radio__input.is-checked + .el-radio__label {
    color: #00c292;
}

.h1 {
    margin-top: 10px;
}

body {
    padding: 0;
    margin: 0;
}


.nk-navigation {
    margin-top: 15px;
}

.nk-navigation a {
    display: inline-block;
    color: #fff;
    background: rgba(255, 255, 255, .2);
    width: 100px;
    height: 50px;
    border-radius: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: center;
    padding: 0 20px;
}

.nk-navigation .icon {
    margin-left: 10px;
    width: 30px;
    height: 30px;
}


.register-container {
    margin-top: 10px;
}

.register-container a {
    display: inline-block;
    color: #fff;
    max-width: 500px;
    height: 50px;
    border-radius: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: center;
    padding: 0 20px;
}

.register-container div {
    margin-left: 10px;
}


.container {
    height: 70vh;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../assets/image/register-bg.jpg);
    margin: 0 17.8%;
}

.container .login-form {
    right: 50%;
    top: 50%;
    transform: translate3d(40%, 20%, 0);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .5);
    font-size: 14px;
    font-weight: 500;
    box-sizing: border-box;
    
    width: 450px;
    height: auto;
    padding: 0;
    margin: 0;
    border-radius: 50px;
    border-width: 3px;
    border-style: solid;
    border-color: rgba(36, 139, 146, 1);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0px 15px rgba(255, 255, 255, 1);
}

.container .login-form .h1 {
    width: 400px;
    height: 55px;
    line-height: 80px;
    color: #000;
    font-size: 18px;
    padding: 0;
    margin: 10px 0px 20px 10px;
    border-radius: 0;
    border-width: 0;
    border-style: solid;
    border-color: rgba(237, 237, 237, 1);
    background-color: rgba(255, 69, 0, 0);
    box-shadow: 0 0 6px rgba(255, 0, 0, 0);
    text-align: center;
}

.container .login-form .rgs-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 0 4% 0;
}

.container .login-form .rgs-form .el-form-item {
    width: 80%;
    display: flex;
}

.rgs-form >>> .el-form-item__content {
    margin-left:20px !important;
}

.container .login-form .rgs-form .input {
    height: 40px;
    padding: 0;
    margin: 0px 0px 10px 50px;
    border-radius: 0;
    border-width: 0;
    border-style: solid;
    border-color: rgba(255, 0, 0, 0);
    background-color: rgba(144, 238, 144, 0);
    box-shadow: 0 0 6px rgba(255, 0, 0, 0);
    
    
}

.container .login-form .rgs-form .send-code .register-code {
    margin: 0px 0px 0px 0px;
    padding: 5px;
    width: 80px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 14px;
    border-width: 0;
    border-style: solid;
    border-color: rgba(255, 0, 0, 0);
    border-radius: 0 20px 20px 0;
    background-color: rgba(96, 98, 102, 1);
    box-shadow: 0 0 6px rgba(255, 0, 0, 0);
    
}

.container .login-form .rgs-form .send-code .btn {
    margin: 10px 60px 40px 0px;
    padding: 0;
    width: 88px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    border-width: 0;
    border-style: solid;
    border-color: #409EFF;
    border-radius: 20px;
    background-color: rgba(255, 215, 0, 1);
    box-shadow: 0 0 0px 4px rgba(255, 255, 255, 1);
}

.container .login-form .rgs-form .send-code .close {
    margin: 10px 20px 40px 0px;
    padding: 0;
    width: 88px;
    height: 32px;
    line-height: 32px;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    border-width: 0;
    border-style: solid;
    border-color: #409EFF;
    border-radius: 20px;
    background-color: rgba(36, 139, 146, 1);
    box-shadow: 0 0 0px 5px rgba(255, 255, 255, 1);
}

</style>
